<template>
  <div>
    <div class="demo-inner-divider">时间轴-水平</div>
    <span class="demo-description">
      通过model控制时间轴的样式，horizontal水平，vertical垂直。
    </span>
    <div class="timeline-wrapper">
      <div class="timeline-wrapper-item">
        <e-timeline mode="horizontal" :isShowHorizontalScroller="false">
          <e-timeline-item :timestamp="'2022-01-01'">发布1.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布2.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布3.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布4.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布5.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布6.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布7.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布8.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布9.0版本</e-timeline-item>
        </e-timeline>
      </div>
      <div class="timeline-wrapper-item">
        <e-timeline mode="horizontal" :isShowHorizontalScroller="false" separate>
          <e-timeline-item :timestamp="'2022-01-01'">发布1.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布2.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布3.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布4.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布5.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布6.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布7.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布8.0版本</e-timeline-item>
          <e-timeline-item :timestamp="'2022-01-01'">发布9.0版本</e-timeline-item>
        </e-timeline>
      </div>
    </div>

    <div class="demo-inner-divider">时间轴-垂直</div>
    <span class="demo-description">
      可以通过slot来设置节点样式。
    </span>
    <div class="timeline-wrapper">
      <div class="timeline-wrapper-item">
        <span class="demo-description">
          基础垂直时间轴
        </span>
        <e-timeline class="demo-timeline-container">
          <e-timeline-item v-for="(item,index) in pointer" :key="index" :timestamp="item.time">
            <p class="content">{{item.content}}</p>
          </e-timeline-item>
        </e-timeline>
      </div>

      <div class="timeline-wrapper-item">
        <span class="demo-description">
          垂直交错时间轴
        </span>
        <e-timeline class="demo-timeline-container" separate>
          <e-timeline-item v-for="(item,index) in pointer" :key="index" :timestamp="item.time">
            <p class="content">{{item.content}}</p>
          </e-timeline-item>
        </e-timeline>
      </div>

      <div class="timeline-wrapper-item">
        <span class="demo-description">
          自定义时间轴节点颜色并开启幽灵模式
        </span>
        <e-timeline pending  class="demo-timeline-container">
          <e-timeline-item color="yellow">发布1.0版本</e-timeline-item>
          <e-timeline-item color="green">发布2.0版本</e-timeline-item>
          <e-timeline-item color="red">严重故障</e-timeline-item>
          <e-timeline-item color="blue">
            发布3.0版本<br>
            <a href="#">查看更多</a>
          </e-timeline-item>
        </e-timeline>
      </div>

      <div class="timeline-wrapper-item">
        <span class="demo-description">
          自定义轴点
        </span>
        <e-timeline class="demo-timeline-container">
          <e-timeline-item v-for="(item,index) in pointerStatus" :key="index">
            <template #dot v-if="item.status">
              <e-icon
                :type="iconName(item.status)"
                :style="`font-size: 16px;color: ${iconColor(item.status)}`">
              </e-icon>
            </template>
            <p class="time">{{item.time}}</p>
            <p class="content">{{item.content}}</p>
            <slot v-if="item.slotContent" class="slot-content">
              {{item.slotContent}}
            </slot>
          </e-timeline-item>
        </e-timeline>
      </div>

      <div class="timeline-wrapper-item">
        <span class="demo-description">
          标题可点击的时间轴
        </span>
        <e-timeline class="demo-timeline-container">
          <e-timeline-item v-for="(item,index) in pointer" :key="index" :timestamp="item.time">
            <e-button class="title" @click="titleBtnClick(item.content)">{{item.content}}</e-button>
          </e-timeline-item>
        </e-timeline>
      </div>

      <div class="timeline-wrapper-item">
        <span class="demo-description">
          可展开节点的时间轴
        </span>
        <e-timeline class="demo-timeline-container">
          <e-timeline-item v-for="(item,index) in pointer" :key="index" :timestamp="item.time" :expand="item.expand">
            <p class="content">{{item.content}}</p>
            <template #content>
              {{item.slotContent}}
            </template>
          </e-timeline-item>
        </e-timeline>
      </div>

    </div>

    <div class="demo-inner-divider">时间轴-横向滚动</div>
    <span class="demo-description">
      通过model控制时间轴的样式，horizontal水平，vertical垂直。
    </span>
    <div class="timeline-wrapper">
      <div class="timeline-wrapper-item">
        <e-timeline mode="horizontal">
          <e-timeline-item>发布1.0版本版本</e-timeline-item>
          <e-timeline-item>发布2.0版本版本版本</e-timeline-item>
          <e-timeline-item>发布3.0版本</e-timeline-item>
          <e-timeline-item>发布4.0版本</e-timeline-item>
          <e-timeline-item>发布5.0版本</e-timeline-item>
          <e-timeline-item>发布6.0版本</e-timeline-item>
          <e-timeline-item>发布7.0版本</e-timeline-item>
          <e-timeline-item>发布8.0版本</e-timeline-item>
          <e-timeline-item>发布9.0版本</e-timeline-item>
        </e-timeline>
      </div>
      <div class="timeline-wrapper-item">
        <e-timeline mode="horizontal" separate>
          <e-timeline-item>发布1.0版本版本</e-timeline-item>
          <e-timeline-item>发布2.0版本版本版本</e-timeline-item>
          <e-timeline-item>发布3.0版本</e-timeline-item>
          <e-timeline-item>发布4.0版本</e-timeline-item>
          <e-timeline-item>发布5.0版本</e-timeline-item>
          <e-timeline-item>发布6.0版本</e-timeline-item>
          <e-timeline-item>发布7.0版本</e-timeline-item>
          <e-timeline-item>发布8.0版本</e-timeline-item>
          <e-timeline-item>发布9.0版本</e-timeline-item>
        </e-timeline>
      </div>
    </div>

    <timeline-md class="markdown-body"></timeline-md>
  </div>
</template>

<script>
import timelineMd from '../../docs/timeline.md';

export default {
  name: 'DemoSwitch',
  components: {
    timelineMd
  },
  data() {
    return {
      pointer: [
        {
          time: '2018.8.8 12:32',
          content: '创建一个管理类表单-规范输出单'
        },
        {
          time: '2018.8.9 9:02',
          content: '创建一个公务类表单-项目启动单',
          expand: true,
          slotContent:'我是自定义内容'
        },
        {
          time: '2018.8.12 12:32',
          content: '创建一个管理类表单-规范输出单'
        },
        {
          time: '2018.8.20 9:02',
          content: '创建一个公务类表单-项目启动单'
        }
      ],
      pointerStatus: [
        {
          time: '2018-08-28 9:02',
          content: '这里显示表单名称或其他内容'
        },
        {
          time: '2018-08-30 12:32',
          content: '这里显示表单名称或其他内容',
          status: 3
        },
        {
          time: '2018-09-09 9:02',
          content: '这里显示表单名称或其他内容'
        },
        {
          time: '2018-09-29 9:02',
          content: '这里显示表单名称或其他内容',
          slotContent:'我是自定义内容',
          status: 2
        }
      ]
    };
  },
  computed: {
    iconName () {
      return status => {
        switch (status) {
        case 1: return 'pause'
        case 2: return 'close-circle'
        case 3: return 'warning'
        case 4: return 'time'
        }
      }
    },
    iconColor () {
      return status => {
        switch (status) {
        case 1: return '#10C038'
        case 2: return '#F04134'
        case 3: return '#FF931D'
        case 4: return '#337DFF'
        }
      }
    }
  },
  methods: {
    titleBtnClick (content) {
      this.$Notice.info({
        duration: 10000,
        title: content
      })
    }
  }
}
</script>

<style lang="less" scoped>
.demo-description {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}

.timeline-wrapper {
  display: flex;
  margin-top:10px;
  margin-bottom:20px;
  justify-content: space-between;
  flex-wrap: wrap;
  .timeline-wrapper-item {
    flex:50%;
    margin-bottom: 20px;
  }
  .demo-timeline-container{
    margin-top:10px;
    margin-bottom: 20px;
  }
  /deep/.haloe-timeline.haloe-timeline-vertical {
    margin-right:100px;

    .time{
      font-size: 14px;
      font-weight: bold;
    }

    .content{
      font-weight: 400;
    }

    .title{
      border: none;
      padding: 0px;
      font-size: 12px;
      height: 23px;
    }
  }
}

.markdown-body {
  margin-top:20px;
}
</style>
